<template>
    <view>
        <!-- 导航栏 -->
        <view class="navBar">
            <view class="navigationBar">
                <view class="navigation iconfont">
                    <view class="navigation_home " @tap.stop="settingInfo">&#xe643;</view>
                </view>
                <text class="navigation_title">我的</text>
            </view>
        </view>
        <view class="h_hidden_box"></view>
        <view class="contains" v-if="isLogin">
            <!-- 用户信息头部 -->
            <view class="info_head">
                <view class="info_name_photo">
                    <view class="info_name">{{myPageInfo.userInfo.userName}}</view>
                    <view class="info_photo">
                        <image :src="myPageInfo.userInfo.photoUrl" mode="aspectFill" />
                    </view>
                </view>
                <view class="info_date">
                    <view class="info_join_date">{{myPageInfo.userInfo.createdAt}}&nbsp;加入</view>
                    <view class="info_address">IP属地：江西</view>
                </view>
            </view>
            <!-- 用户关注粉丝和设置 -->
            <view class="info_follow_set">
                <view class="info_follow">
                    <!-- 关注 -->
                    <view class="follwing" @tap.stop="toFollowInfoPage" data-type="getFollowed">
                        <view class="follow_num">{{myPageInfo.followedNum}}</view>
                        <view class="follow_title">关注</view>
                    </view>
                    <!-- 粉丝 -->
                    <view class="follwed" @tap.stop="toFollowInfoPage" data-type="getFollower">
                        <view class="follow_num">{{myPageInfo.followerNum}}</view>
                        <view class="follow_title">粉丝</view>
                    </view>
                </view>
                <view class="info_set">
                    <view class="food_car">菜篮子</view>
                    <view class="share">分享</view>
                    <view class="setting" @tap.stop="toSettingPage">设置</view>
                </view>
            </view>

            <!-- 标签页，用户菜单和作品列表 -->
            <view class="tabs">
                <view class="tab_head" :class="{ hidden: !isHeaderVisible }">

                    <block v-for=" (item, index)  in   tabList " :key="index">
                        <!--  -->
                        <view class="tab_head_item" :class="{ active: current_tab === index }" :data-value="index"
                            @tap.stop="handleClick">
                            <text>{{ item.title }}&nbsp;{{item.num}}</text>
                        </view>
                    </block>
                </view>
                <!-- 菜谱 -->
                <view v-if="current_tab === 0" class="tab_body">
                    <scroll-view :scroll-y="true" class="scroll_box" @scroll="handleScroll">
                        <view class="data_none" v-if=" myPageInfo.recipeList.length===0">
                            暂时没有发布菜谱哦~
                        </view>
                        <view class="tab_menu_item" v-if=" myPageInfo.recipeList.length!==0">
                            <!--  -->
                            <block v-for="(item, index) in  myPageInfo.recipeList " :key="index">
                                <!-- @tap=toMenuInfoPage(f_item) -->
                                <view class="menu_item" @tap="toMenuInfoPage(item)">
                                    <view class="menu_img">
                                        <!--   -->
                                        <image :src="item.imageUrl" mode="aspectFill" />
                                    </view>
                                    <view class="menu_info">
                                        <view class="menu_title_data">
                                            <view class="title">{{item.title}}</view>
                                            <view class="menu_data">
                                                <view class="collection">{{item.favoriteNum}}&nbsp;收藏</view>
                                                <view class="watching">{{item.viewNumber}}&nbsp;浏览</view>
                                                <view class="opusNum">{{item.opusNum}}&nbsp;人做过</view>
                                            </view>
                                        </view>

                                        <view class="author_info">
                                            <view class="author_photo">
                                                <image :src="myPageInfo.userInfo.photoUrl" mode="aspectFill" />
                                            </view>
                                            <view class="author_name">{{myPageInfo.userInfo.userName}}</view>
                                        </view>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </scroll-view>
                </view>

                <!-- 作品 -->
                <view v-if="current_tab === 1" class="tab_body">
                    <scroll-view :scroll-y="true" class="scroll_box" @scroll="handleScroll">
                        <view class="data_none" v-if=" myPageInfo.opusList.length===0">
                            暂时没有发布作品哦~
                        </view>
                        <view class="tab_opus_item" v-if="myPageInfo.opusList.length !== 0">
                            <!--   -->
                            <block v-for="(item, index) in  myPageInfo.opusList " :key="index">
                                <!-- @tap=toMenuInfoPage(f_item) -->
                                <view class="opus_item" @tap.stop="toOpusInfoPage(item)">
                                    <view class="opus_img">

                                        <image :src=item.images[0] mode="aspectFill" />
                                    </view>
                                    <view class="cover iconfont">&#xe6c8;&nbsp;{{item.likes}}</view>
                                </view>
                            </block>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="box_hidden"></view>

            <!-- 上传作品 -->
            <view class="upload_opus" v-if="current_tab==1">
                <view class="iconfont" @tap.stop="toUploadOpusPage">
                    <view class="icon">&#xe62e;</view>
                    <view>传作品</view>
                </view>
            </view>
        </view>

        <view class="setting_model" :class="{hide: !isSetting}">
            <view class="setting_content " :class="{hide: !isSetting}">
                <view class="setting_choose">
                    <view class="setting_btn" @tap.stop="toSettingPage">编辑个人资料</view>
                    <view class="other_account" @tap.stop="toLoginPage">切换账号</view>
                </view>
                <view class="close_model" @tap.stop="closeModel">取消</view>
            </view>
        </view>
        <LoginTip ref="loginTip" v-if="!isLogin"></LoginTip>

    </view>
</template>

<script setup>
    import { ref, onMounted, inject } from 'vue';
    import "./my.scss";
    import Taro, { useRouter, useDidShow, useLoad, useDidHide } from "@tarojs/taro";
    import LoginTip from '../../components/LoginTip.vue';

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl

    const myPageInfo = ref({
        userInfo: {
            userName: "",
            photoUrl: "",
            createdAt: "",
        },
        isFollow: "",
        followerNum: "",
        followedNum: "",
        menuNum: "",
        opusNum: "",
        recipeList: [
            {
                recipeId: "",
                title: "",
                imageUrl: "",
                favoriteNum: "",
                viewNumber: "",
                opusNum: ""
            }
        ],
        opusList: [
            {
                opusId: "",
                images: "",
                likes: "",
            }],


    })


    // 设置按钮显示
    const isSetting = ref(false)
    const settingInfo = () => {
        // 关闭底部导航栏
        wx.hideTabBar()
        isSetting.value = true;
    }
    const closeModel = () => {
        wx.showTabBar();
        isSetting.value = false;
    }





    // 设置标签页
    // 隐藏和显示标签页头部(上滑下滑控制)
    const isHeaderVisible = ref(true);
    const lastScrollTop = ref(0);
    const headerHeight = ref(100);
    const handleScroll = (e) => {
        const currentScrollTop = e.detail.scrollTop;
        if (currentScrollTop > lastScrollTop.value) {
            // 向下滚动
            isHeaderVisible.value = false;
        } else {
            // 向上滚动
            isHeaderVisible.value = true;
        }
        lastScrollTop.value = currentScrollTop <= 0 ? 0 : currentScrollTop;
    }
    const current_tab = ref(1);
    const tabList = ref([
        { title: '菜谱', num: "0" },
        { title: "作品", num: "0" },

    ]);
    function handleClick(e) {
        current_tab.value = e.currentTarget.dataset.value;
    }




    // 跳转到关注用户/粉丝详细页面
    const toFollowInfoPage = (e) => {
        Taro.navigateTo({
            url: `../detail/followerInfo/followerInfo?userId=${myPageInfo.value.userInfo.userId}
            &curUserId=${curUserId.value}&type=${e.currentTarget.dataset.type}&userName=${myPageInfo.value.userInfo.userName}`
        });
    }


    // 跳转单个作品详细页面
    const toOpusInfoPage = (item) => {
        Taro.navigateTo({
            url: `../detail/opusInfo/opusInfo?opusId=${item.opusId}&userId=${myPageInfo.value.userInfo.userId}&recipeId=${item.recipeId}&curUserId=${curUserId.value}`
        });
    }



    // 跳转到菜谱详细页面
    const toMenuInfoPage = (item) => {
        Taro.navigateTo({
            url: `../detail/menuInfo/menuInfo?recipeId=${item.recipeId}&userId=${curUserId.value}`
        });
    }
    // 跳转到上传作品界面
    const toUploadOpusPage = (item) => {
        Taro.navigateTo({
            url: `../detail/uploadOpus/uploadOpus?recipeId=${-1}`
        });
    }



    function getUserPageInfo() {
        Taro.request({
            url: `${baseUrl}/user/getUserPageInfo?userId=${curUserId.value}&curUserId=${curUserId.value}`,
            success: (res) => {
                myPageInfo.value = res.data.data;
                tabList.value[0].num = myPageInfo.value.menuNum;
                tabList.value[1].num = myPageInfo.value.opusNum;
                myPageInfo.value.opusList.forEach(item => {
                    item.images = JSON.parse(item.images);
                });
            }
        });
    }

    // 跳转到设置界面
    const toSettingPage = () => {
        Taro.navigateTo({
            url: `../detail/settingUserInfo/settingUserInfo`,
        })
    }

    //跳转到登录界面
    const toLoginPage = () => {
        Taro.navigateTo({
            url: `../detail/login/login`,
        })
    }
    const loginTip = ref(null);
    // 判断用户是否登录
    const isLogin = ref(false);
    function getIsLogin() {
        if (loginTip.value !== null) loginTip.value.toLoginPage = toLoginPage;
        isLogin.value = !(curUserId.value === "");
        if (!isLogin.value) {
            if (loginTip.value !== null)
                loginTip.value.isHidden = false;
            return true
        } else return false;
    }

    // 存放当前登录用户
    const curUserId = ref('');

    Taro.useDidShow(() => {
        curUserId.value = Taro.getStorageSync('userId')
        closeModel();
        getIsLogin();
        if (isLogin.value)
            getUserPageInfo();

    })
    Taro.useDidHide(() => {
        wx.showTabBar();
        closeModel();
    })
    onMounted(() => {
        // getUserPageInfo();
    });
</script>

<style lang="scss" scoped></style>